<template>
  <div class="map">
    <!-- 导航栏 -->
    <van-nav-bar
      title="不 凡"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 搜索框 -->
    <input
      type="text"
      v-model="sisui"
      @input="fang"
      placeholder="请输入搜索内容"
      class="mapsou"
    />
    <!-- 列表框 -->
    <ul>
      <li v-for="item in seatchRis" :key="item.id" @click="uptMap(item)">
        <div>{{ item.name }}</div>
      </li>
    </ul>
    <!-- 地图 -->
    <div class="mapTU">
      <p>显示当前位置：</p>
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Map",
  data() {
    return {
      // 输入的内容
      sisui: "",
      // 当前定位的地址
      city: "",
      // 搜索的结果
      seatchRis: [],
    };
  },
  mounted() {
    let that = this;
    var map = new AMap.Map("container", {
      resizeEnable: true,
    });
    if (this.$store.state.upaaintex.name) {
      var map = new AMap.Map("container", {
        zoom: 11, //级别
        center: [
          this.$store.state.upaaintex.location.lng,
          this.$store.state.upaaintex.location.lat,
        ], //中心点坐标
      });
      var marker = new AMap.Marker({
        position: [
          this.$store.state.upaaintex.location.lng,
          this.$store.state.upaaintex.location.lat,
        ], //位置
      });
      map.add(marker); //添加到地图
    } else {
    }
    AMap.plugin("AMap.CitySearch", function () {
      var citySearch = new AMap.CitySearch();
      citySearch.getLocalCity(function (status, result) {
        if (status === "complete" && result.info === "OK") {
          // 查询成功，result即为当前所在城市信息
          that.city = result.city;
        }
      });
    });
  },
  methods: {
    fang() {
      // console.log(this.sisui);
      let that = this;
      AMap.plugin("AMap.Autocomplete", function () {
        // 实例化Autocomplete
        var autoOptions = {
          //city 限定城市，默认全国
          city: that.city,
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(that.sisui, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result);
          that.seatchRis = result.tips;
        });
      });
    },
    // 把点击地址保存到 Vuex 里
    uptMap(item) {
      this.$store.commit("upindex", item);
      // 跳转首页
      this.$router.push("/home");
    },
  },
};
</script>

<style lang="less" scoped>
body {
  background-color: #fff !important;
}
.map {
  .mapsou {
    width: 90%;
    height: 48px;
    margin: 10px 5% 6px;
    padding: 10px 10px;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgb(189, 186, 186);
    border: 1px solid rgb(231, 231, 231);
  }
  ul {
    margin-top: 30px;
    height: 280px;
    overflow-x: hidden;
    overflow-y: scroll;
    // overflow: hidden;
    li {
      width: 90%;
      height: 38px;
      margin: 5px 5% 0;
      overflow: hidden;
      border: 1px soli rgb(216, 211, 211);
      .searchItem {
        line-height: 38px;
      }
    }
  }
  .mapTU {
    width: 100%;
    height: 221px;
    position: fixed;
    left: 0;
    bottom: 0;
    p {
      font-size: 16px;
      font-weight: 700;
    }
  }
}
#container {
  width: 100%;
  height: 221px;
}
</style>